import {
  View,
  Text,
  TouchableWithoutFeedback,
  TouchableOpacity,
} from "react-native";
import { R } from '../../../core';
import {IconFont } from 'enoad-common/src/index';
import { EnoadBaseModule } from "../../index";
import { v4 as uuidv4 } from "uuid";
import React from "react";
import _, { parseInt } from "lodash";

export default class SearchList extends EnoadBaseModule {
  constructor(config: string) {
    super(config);
  }

  /**
   * 获取的布局信息
   * @returns
   */
  getLayout() {
    let length = this.config.length;
    let showItems = new Array();
    let item = new Array();
    for (let index = 0; index < length; index++) {
      item.push(`custom_${index}`);
    }
    for (let index = 0; index < length; index++) {
      let showItem: any = {};
      item.forEach((key: string) => {
        showItem["uuid"] = uuidv4();
        showItem["title"] = "标题" + index;
        showItem["apiKey"] = key;
        showItem["type"] = "1";
      });
      showItems.push(showItem);
    }
    return showItems;
  }

  /**
   * 获取的数据信息
   * @returns
   */
  getData() {
    let length = this.config.length * 2;
    let data = [];
    let item = new Array();
    for (let index = 0; index < length; index++) {
      item.push(`custom_${index}`);
    }
    for (let index = 0; index < length; index++) {
      let showItem: any = {};
      item.forEach((key: string) => {
        showItem[`${key}`] = "内容" + index;
      });

      data.push({
        uuid: uuidv4(),
        id: index,
        name: "测试数据" + index,
        type: "拜访",
        status: Math.round(Math.random() * length),
        address: "测试客户的地址信息山发哦实地那是大家瓦斯的咖啡机安稳",
        title: "客户测试拜访" + index,
        show: false,
        showPop: false,
        showItem,
      });
    }
    return data;
  }

  getURL() {
    return "";
  }

  /**
   * 获取每一行的布局和操作信息
   * @param componentId 唯一识别
   * @param item 数据
   * @param showItems 更多布局
   * @param actions 操作
   * @param openPlanDetail 打开界面方法
   * @returns
   */
  getDataWithLayout(
    componentId: string,
    item: any,
    showItems: any,
    actions: any,
    openPlanDetail: any
  ) {
    //包含图标，名称，状态
    let header = (
      <View style={R.styles.schadule_bottom}>
        <IconFont name={"solid-person"} size={24} color={R.color.titleBg} />
        <Text style={R.styles.schadule_name}>{item.title}</Text>
        <Text style={R.styles.schadule_visitStatus}>{item.status}</Text>
      </View>
    );
    //第二行，包含地址信息
    let itemAddress = (
      <View style={R.styles.schadule_bottom}>
        <View style={R.styles.text}>
          <Text style={R.styles.schadule_address}>{item.address}</Text>
        </View>
        <Text style={R.styles.schadule_visitStatus}>{item.type}</Text>
      </View>
    );

    let bottomImageResource;
    let moreLayout = new Array();
    if (item.show) {
      bottomImageResource = (
        <IconFont name={"shangla1"} size={20} color={R.color.titleBg} />
      );
      if (item.showItem && showItems) {
        //如果布局和数据同时存在。则取数据进行展示
        _.forEach(showItems, (showItem: any) => {
          let name = showItem.title + ": ";
          let value = item.showItem[showItem.apiKey];
          moreLayout.push(
            <View key={showItem.uuid} style={R.styles.row}>
              <Text style={R.styles.schadule_address}>{name}</Text>
              <Text style={[R.styles.schadule_address, { flex: 1 }]}>
                {value}
              </Text>
            </View>
          );
        });
      }
    } else {
      bottomImageResource = (
        <IconFont name={"icon_xialaxuanze"} size={20} color={R.color.titleBg} />
      );
    }
    //底部展开收缩
    let bottomBtn = (
      <TouchableWithoutFeedback
        onPress={() => {
          actions && actions.showItem(componentId, item, false, true, false);
        }}
      >
        <View style={R.styles.schadule_bottom}>
          {bottomImageResource}
          <TouchableOpacity
            style={R.styles.schadule_bottomRight}
            onPress={() => {
              actions && actions.showItem(componentId, item, true, false, true);
            }}
          >
            <IconFont name={"gongzuotai"} size={20} color={R.color.titleBg} />
          </TouchableOpacity>
          {item.showPop ? (
            <TouchableOpacity
              style={R.styles.schadule_pop}
              onPress={() => {
                actions &&
                  actions.showItem(componentId, item, false, false, true);
                openPlanDetail && openPlanDetail(item);
              }}
            >
              <Text
                style={[
                  R.styles.text12,
                  { paddingVertical: 10, paddingHorizontal: 10 },
                ]}
                numberOfLines={1}
              >
                {"详情界面"}
              </Text>
            </TouchableOpacity>
          ) : null}
        </View>
      </TouchableWithoutFeedback>
    );

    return (
      <View style={R.styles.schadule_bord}>
        {header}
        {itemAddress}
        {moreLayout}
        {bottomBtn}
      </View>
    );
  }
}
